<template>
  <div class="tags-card">
    <div class="header">
      <div class="header-text">{{headerText}}</div>
      <div class="header-btn" @click="onBtnClick">{{headerBtn}}</div>
    </div>
    <div class="body">
      <div class="tags-wrapper" v-for="(item ,index) in tagsArray" :key="index">
        <tag :tag-name="item" @onClick="onTagClick(item)"></tag>
      </div>
    </div>

  </div>
</template>

<script>
  import Tag from './Tag'

  export default {
    name: 'TagsCard',
    components: {Tag},
    props: {
      headerText: {type: String, default: ''},
      headerBtn: {type: String, default: ''},
      tagsArray: {type: Array, default: ['MpVue', 'Java', 'Python', '微博', 'P40', 'Android', '哈麻批', '吃鸡']}
    },
    methods: {
      onTagClick (tag) {
        // console.log(tag)
        this.$emit('onTagClick', tag)
      },
      onBtnClick () {
        console.log(this.headerBtn)
        this.$emit('onBtnClick')
      }
    }

  }
</script>

<style scoped lang="scss">
  .tags-card {
    padding: 15px 0 0;

    .header {
      display: flex;
      justify-content: space-between;
      padding: 0 14px;
      font-size: 14px;

      .header-text {
        color: #222222;
      }
      .header-btn{
        color: #3696EF;
      }
    }

    .body {
      display: flex;
      flex-flow: row wrap;
      padding: 8px;

      .tags-wrapper {
        padding: 4px;
        max-width: 100%;
        box-sizing: border-box;
      }
    }
  }
</style>
